<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .a {
            width: 500px;
            height: 300px;
            margin: 30px auto;
            position: relative;
            background-color: #f00;
            overflow: hidden;
        }

        .a1 {
            width: 2500px;
            display: flex;
            position: absolute;
        }

        .a1 p {
            width: 500px;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            border: 1px solid #000;
            box-sizing: border-box;
        }

        .progress {
            position: absolute;
            width: 500px;
            height: 8px;
            background-color: #aaa;
            bottom: 4px;
            display: none;
        }

        .block {
            width: 50px;
            height: 16px;
            top: -4px;
            position: absolute;
            background-color: #666;
        }
    </style>
</head>

<body>

    <div class="a">
        <div class="a1">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>1</p>
        </div>
        <div class="progress">
            <div class="block"></div>
        </div>
    </div>




    <script>

        // 无缝滚动的实现
        //    在最后面复制一个第一张


        var oA1 = document.querySelector('.a1');
        var oProgress = document.querySelector('.progress');
        var oBlock = document.querySelector('.block');
        var oBox = document.querySelector('.a');
        var t;


        fn()

        oBox.onmouseover = function () {
            oProgress.style.display = 'block';
            clearInterval(t);
            // 实际上这个进度条在最后面的时候，没有完全对上（播放最后一张的时候，进度条不能显示在最前面）
            oBlock.style.left = -parseInt(oA1.style.left) / 4 + 'px';
        }

        oBox.onmouseout = function () {
            oProgress.style.display = 'none';
            fn()
        }



        // 拖拽之后
        //    给block设置  x
        //    给oA1设置   -4 * x



        // 递归
        function fn() {
            move(oA1, 4, -2000, 'left', function () {
                oA1.style.left = 0;
                fn()
            })
        }



        function move(ele, speed, end, prop, cb) {
            // 获取开始的位置
            var cur = parseInt(getComputedStyle(ele)[prop]);
            // 确定速度
            speed = end > cur ? speed : -speed;
            t = setInterval(function () {
                cur += speed;
                ele.style[prop] = cur + 'px';
                if (Math.abs(end - cur) <= Math.abs(speed)) {
                    clearInterval(t);
                    ele.style[prop] = end + 'px';
                    cb && cb()
                }
            }, 20)
        }
    </script>

</body>

</html>